<template>
  <div class="index">
    <!-- 头部搜索框 -->
    <header>
      <a class="header-city" href="###">
        广州
        <i></i>
      </a>
      <div class="header-seach" @click="goSeach()  ">
        <a href="#"></a>
        <span>请输入商品名称</span>
      </div>
    </header>
    <div class="index-main">
      <!-- 轮播图 -->
      <div class="block-1">
        <!-- <el-carousel height="1.5rem">
        <el-carousel-item
          v-for="(item,index) in bgList"
          :key="index"
          :style="{background:'url('+item.bg+')no-repeat',backgroundSize:'cover'}"
        ></el-carousel-item>
        </el-carousel>-->
        <van-swipe
          style="height: 1.85rem;"
          class="my-swipe"
          :autoplay="3000"
          indicator-color="white"
        >
          <van-swipe-item
            v-for="(item,index) in bgList"
            :key="index"
            :style="{background:'url('+item.bg+')no-repeat',backgroundSize:'cover'}"
          ></van-swipe-item>
        </van-swipe>
      </div>
      <!-- 菜单分类 -->
      <div class="munlist clear_fix">
        <a href="###" v-for="(item,index) in munList" :key="index">
          <i>
            <img :src="item.src" alt />
          </i>
          <p>{{item.title}}</p>
        </a>
      </div>
      <!-- img -->
      <div class="home-img">
        <img src="@/assets/img/home-img.jpg" alt />
        <i class="news-img"></i>
      </div>
      <!-- 纵向轮播 -->
      <van-swipe
        style="height: 0.28rem;background: #fff;marginBottom: 0.08rem;"
        :autoplay="3000"
        :show-indicators="false"
        vertical
      >
        <van-swipe-item>营业资质公示，详情请点击查询</van-swipe-item>
        <van-swipe-item>移动/联通积分免费兑储值卡</van-swipe-item>
        <van-swipe-item>不良信息投诉与举报</van-swipe-item>
        <van-swipe-item>营业资质公示，详情请点击查询</van-swipe-item>
        <van-swipe-item>移动/联通积分免费兑储值卡</van-swipe-item>
      </van-swipe>
      <!-- indexcard -->
      <app-indexcard :index="0" :indexcard="indexcardList[0]"></app-indexcard>
      <!-- imgbox -->
      <div class="imgbox">
        <div v-for="(item,index) in imgboxList" :key="index">
          <a href="###">
            <img :src="item" alt />
          </a>
        </div>
      </div>
      <!-- indexcard -->
      <app-indexcard
        v-for="(item,index) in indexList"
        :key="index"
        :index="item"
        :indexcard="indexcardList[item]"
      ></app-indexcard>

      <div class="indextwoimg">
        <div>
          <a href="###">
            <img src="../../assets/img/indextwoimg01.jpg" alt />
          </a>
        </div>
        <div>
          <a href="###">
            <img src="../../assets/img/indextwoimg02.jpg" alt />
          </a>
        </div>
      </div>
      <!-- like-box -->
      <app-likebox></app-likebox>

      <!-- indexbottomcard -->
      <app-indexbottomcard></app-indexbottomcard>
      <!-- indexfooter -->
      <div class="indexfooter">
        <p>沪IPC备09008015号</p>
        <p>上海易果电子商务有限公司</p>
      </div>
    </div>

    <!-- 底部导航 -->
    <app-bottomnav></app-bottomnav>
  </div>
</template>

<script>
// 引入底部导航
import appBottomnav from "@/components/bottomNav";
//引入indexcard
import appIndexcard from "@/components/indexCard";
//引入likebox
import appLikebox from "@/components/likeBox";
//引入indexbottomcard
import appIndexbottomcard from "@/components/indexBottomcard";

// 引用indexgoodApi接口
import indexgoodApi from "@/api/indexgoodApi";

export default {
  data() {
    return {
      indexList: [1, 2, 3, 4, 5, 6],
      indexcardList: [
        "https://img12.yiguoimg.com/d/items/2020/200313/9288740091701357_1125x652.jpg?w=1125&h=652",
        "https://img12.yiguoimg.com/d/items/2019/191107/9288739500599143_1125x652.jpg?w=1125&h=652",
        "https://img10.yiguoimg.com/d/items/2020/200707/9288740637780199_1125x652.jpg?w=1125&h=652",
        "https://img11.yiguoimg.com/d/items/2020/200710/9288740647676138_1125x652.jpg?w=1125&h=652",
        "https://img09.yiguoimg.com/d/items/2020/200605/9288740488980677_1125x652.jpg?w=1125&h=652",
        "https://img13.yiguoimg.com/d/items/2020/200526/9288740443039930_1125x652.jpg?w=1125&h=652",
        "https://img10.yiguoimg.com/d/items/2020/200521/9288740415154357_1125x652.jpg?w=1125&h=652",
        "https://img09.yiguoimg.com/d/items/2020/200515/9288740386613423_1125x652.jpg?w=1125&h=652",
        ""
      ],
      bgList: [
        {
          bg: require("@/assets/img/banner01.jpg")
        },
        {
          bg: require("@/assets/img/banner02.jpg")
        },
        {
          bg: require("@/assets/img/banner03.jpg")
        },
        {
          bg: require("@/assets/img/banner04.jpg")
        },
        {
          bg: require("@/assets/img/banner05.jpg")
        }
      ],
      munList: [
        {
          title: "买二付一",
          src:
            "https://img10.yiguoimg.com/d/items/2019/190621/9570213294614229_144.png?w=144&h=144"
        },
        {
          title: "原箱佳沛",
          src:
            "https://img10.yiguoimg.com/d/items/2019/190704/9570213406385892_144.png?w=144&h=144"
        },
        {
          title: "会员福利",
          src:
            "https://img11.yiguoimg.com/d/items/2019/190621/9570213294679765_144.png?w=144&h=144"
        },
        {
          title: "银行活动",
          src:
            "https://img12.yiguoimg.com/d/items/2019/190705/9570213415954149_144.png?w=144&h=144"
        },
        {
          title: "新品惠萃",
          src:
            "https://img13.yiguoimg.com/d/items/2019/190621/9570213294745301_144.png?w=144&h=144"
        },
        {
          title: "精选肉类",
          src:
            "https://img09.yiguoimg.com/d/items/2019/190621/9570213294778069_144.png?w=144&h=144"
        },
        {
          title: "海鲜水产",
          src:
            "https://img10.yiguoimg.com/d/items/2019/190621/9570213294810837_144.png?w=144&h=144"
        },
        {
          title: "食品饮料",
          src:
            "https://img14.yiguoimg.com/d/items/2019/190621/9570213294843605_144.png?w=144&h=144"
        }
      ],
      imgboxList: [
        "https://img10.yiguoimg.com/d/items/2020/200203/9288739937003587_1125x137.jpg?w=1125&h=137",
        "https://img09.yiguoimg.com/d/items/2020/200715/9288740661504239_1125x455.jpg?w=1125&h=455",
        "https://img10.yiguoimg.com/d/items/2020/200701/9288740598425825_1125x455.jpg?w=1125&h=455",
        "https://img09.yiguoimg.com/d/items/2020/200714/9288740659013870_1125x455.jpg?w=1125&h=455",
        "https://img11.yiguoimg.com/d/items/2020/200710/9288740647741674_1125x455.jpg?w=1125&h=455"
      ]
    };
  },

  components: { appBottomnav, appIndexcard, appLikebox, appIndexbottomcard },

  methods: {
    goSeach() {
      this.$router.push("/home/seach");
    }
  },

  created() {
    indexgoodApi
      .getGood(1)
      .then(res => {
        res.data;
        // console.log(res.data.data);
      })
      .catch(err => {
        console.log(err);
      });
    // console.log(indexgoodApi.getGood());
  }
};
</script>

<style scoped>
/* 头部 */
header {
  position: fixed;
  top: 0;
  width: 100%;
  height: 0.38rem;
  line-height: 0.38rem;
  background: linear-gradient(90deg, #39da85, #01b27a);
  display: flex;
  z-index: 100;
}
.header-city {
  display: inline-block;
  width: 0.6rem;
  text-align: center;
  font-size: 12px;
  color: #fff;
}
.header-city i {
  display: inline-block;
  width: 0.08rem;
  height: 0.04rem;
  background: url("../../assets/img/home-a.png") no-repeat;
  background-size: 100% 100%;
}
.header-seach {
  display: inline-block;
  position: relative;
  width: 2.5rem;
  height: 0.28rem;
  border-radius: 0.14rem;
  background: #fff;
  font-size: 12px;
  margin-top: 0.05rem;
}
.header-seach span {
  position: absolute;
  left: 0.28rem;
  font-size: 12px;
  color: #999;
  margin-top: -0.05rem;
}
.header-seach a {
  display: inline-block;
  position: absolute;
  left: 0.04rem;
  width: 0.25rem;
  height: 0.25rem;
  background: url("../../assets/img/home-b.png") no-repeat;
  background-size: 100% 100%;
}

/* 轮播图 */
.block-1 {
  z-index: 100;
  width: 100%;
  height: 1.85rem;
}
.index-main {
  padding-top: 0.38rem;
  padding-bottom: 0.5rem;
}
/*  菜单分类 */
.munlist {
  padding: 0.08rem 0.16rem;
  font-size: 12px;
  background: #fff;
}
.munlist > a {
  display: inline-block;
  width: 25%;
  padding-bottom: 0.04rem;
}
.munlist > a > i {
  display: block;
  width: 0.6rem;
  margin: 0 auto;
}
.munlist > a > i > img {
  display: inline-block;
  width: 0.54rem;
  height: 0.54rem;
}
.munlist > a > p {
  font-size: 12px;
  color: rgb(51, 51, 51);
}
/* img */
.home-img {
  width: 100%;
  height: 0.97rem;
  background: #fff;
}
.home-img > img {
  width: 100%;
  height: 100%;
}
/* 纵向轮播 */
.van-swipe-item {
  height: 0.28rem;
  font-size: 12px;
  text-align: left;
  padding: 0.05rem 0.08rem 0.05rem 0.9rem;
  color: rgb(51, 51, 51);
}
.home-img {
  position: relative;
}
.news-img {
  position: absolute;
  display: block;
  width: 0.58rem;
  height: 0.12rem;
  z-index: 10;
  bottom: -0.18rem;
  left: 0.18rem;
  background: url("../../assets/img/news.png") no-repeat;
  background-size: cover;
  /* background: red; */
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  height: 100%;
  line-height: 150px;
  text-align: center;
  padding: 0;
}
/* imgbox */
.imgbox > div > a > img {
  width: 100%;
}
/* indextwoimg */
.indextwoimg {
  width: 100%;
  height: 2rem;
}
.indextwoimg > div {
  display: inline-block;
  width: 50%;
}
.indextwoimg > div > a > img {
  width: 100%;
}
.indexfooter {
  line-height: 0.32rem;
  text-align: center;
  color: #8d8a8a;
}
.indexfooter > p {
  font-size: 11px;
  line-height: 0.16rem;
}
</style>

<style lang="scss">
.el-carousel__button {
  width: 18px !important;
}
.el-carousel__indicator--horizontal {
  padding: 0px 4px !important;
}
</style>